<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
</head>
<body>
<div id="app">
  <h3>四大名著</h3>
  <table style="border: black 1px solid">
    <tr>
      <th>序号</th>
      <th>名称</th>
    </tr>
    <tr is="book_one"></tr>
    <tr is="book_two"></tr>
    <tr is="book_three"></tr>
    <tr is="book_four"></tr>
  </table>
  我最喜欢的是:<mylike></mylike>
</div>
<!-- 1:引包 -->
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  // Vue.component('book_one',{
  //   template:`<tr><td>1</td><td>西游</td></tr>`
  // });
  // Vue.component('book_two',{
  //   template:`<tr><td>2</td><td>三国</td></tr>`
  // });
  // Vue.component('book_three',{
  //   template:`<tr><td>3</td><td>水浒</td></tr>`
  // });
  // Vue.component('book_four',{
  //   template:`<tr><td>4</td><td>红楼</td></tr>`
  // });
  Vue.component('mylike',{
    template:`<strong>{{likeBook}}</strong>`,
    data: function () {
      return {
        likeBook:'水浒'
      }
    }
  });
  var book1 = {
    template: `<tr><td>1</td><td>西游</td></tr>`
  };
  var book2 = {
    template:`<tr><td>2</td><td>三国</td></tr>`
  };
  var book3 = {
    template:`<tr><td>3</td><td>水浒</td></tr>`
  };
  var book4 = {
    template:`<tr><td>4</td><td>红楼</td></tr>`
  };
  new Vue({
    el: "#app",
     components:{
      'book_one':book1,
      'book_two':book2,
      'book_three':book3,
      'book_four':book4
    }
  })
</script>
</body>
</html>
